<template>
	<view class="book">
		<!-- 搜索框 -->
		<MySearch></MySearch>

		<!-- 顶部导航栏 -->
		<MyHeader @tab-change="onTabChange"></MyHeader>

		<!-- 根据 currentTab 显示不同内容 -->
		<view v-if="currentTab === 0">
		<!-- 轮播图 -->
			<MyBanner></MyBanner>
			<!-- 分类 -->
			<MyCategory></MyCategory>
		
		</view>
		<view v-else-if="currentTab === 1">
			<text>免费</text>
		</view>
		<view v-else-if="currentTab === 2">
			<text>男生</text>
		</view>
		<view v-else-if="currentTab === 3">
			<text>女生</text>
		</view>
		<view v-else-if="currentTab === 4">
			<text>出版</text>
		</view>
		<view v-else-if="currentTab === 5">
			<text>听书</text>
		</view>
		<view v-else-if="currentTab === 6">
			<text>漫画</text>
		</view>
		<view v-else-if="currentTab === 7">
			<text>知识</text>
		</view>
		<view v-else-if="currentTab === 8">
			<text>故事</text>
		</view>
		<view v-else-if="currentTab === 9">
			<text>视频</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0 // 默认选中第一个标签
			};
		},
		methods: {
			onTabChange(tabIndex) {
				this.currentTab = tabIndex; // 更新当前显示的内容
			}
		}
	}
</script>

<style lang="scss">
	.book {
		padding: 0 30rpx;
		overflow: auto;

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
		}
	}
</style>
